<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" style="top:5px;" title="PO明细选择列表" width="80%">
    <div style="height:500px;display:flex">
      <!--表格渲染-->
      <DataGridTable
        v-loading="loading"
        :sup_this="sup_this"
        :data="data.rtnList"
        :total="total"
        :multi-select="false"
        :show-row-number="true"
        :all-define-columns="['itemName','qty','receiveQty','balanceQty','deliveryDate','itemSpec','itemBrand','unit','taxPrice','taxRate']"
        grid-id="poItemSelectListGridId"
        style="width: 100%"
        height="500px"
        max-height="600px"
        @current-change="handleCurrentChange">
        <el-table-column v-if="multiSelect" prop="id" width="90px">
          <template slot="header" slot-scope="scope">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange" />
          </template>
          <template slot-scope="scope">
            <el-button v-if="selectedRows[scope.row.id]" type="danger" size="mini" @click="checkSelectChange(scope.row)">取消</el-button>
            <el-button v-else type="primary" size="mini" @click="checkSelectChange(scope.row)">选择</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="busDate" label="业务时间" width="160px">
          <template slot="header" slot-scope="scope">
            <el-date-picker
              v-model="busDate"
              placeholder="业务时间"
              type="datetime"
              size="mini"
              clearable
              style="width: 200px"
              class="filter-item"
              @change="filterQuery"/>
          </template>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.busDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sysGenCode" label="采购单号" width="160px">
          <template slot="header" slot-scope="scope">
            <el-input v-model="paramBean.sysGenCode" clearable placeholder="回车过滤" style="width: 100%;" class="filter-item" @keyup.enter.native="filterQuery"/>
          </template>
        </el-table-column>
        <el-table-column prop="busOtherCpyName" label="供应商" width="150px" show-overflow-tooltip>
          <template slot="header" slot-scope="scope">
            <el-input v-model="paramBean.busOtherCpyName" clearable placeholder="输入回车过滤" style="width: 100%;" class="filter-item" @keyup.enter.native="filterQuery"/>
          </template>
        </el-table-column>
        <el-table-column prop="itemCode" label="物料编号" width="150px" show-overflow-tooltip>
          <template slot="header" slot-scope="scope">
            <el-input v-model="paramBean.itemCode" clearable placeholder="回车过滤" style="width: 100%;" class="filter-item" @keyup.enter.native="filterQuery"/>
          </template>
        </el-table-column>
        <el-table-column prop="itemName" label="名称" show-overflow-tooltip/>
        <DataGridColumn slot="qty" prop="qty" label="采购数" />
        <DataGridColumn slot="receiveQty" prop="receiveQty" label="已收货数" />
        <DataGridColumn slot="balanceQty" prop="balanceQty" label="待收货数" />
        <DataGridColumnSlot slot="deliveryDate" prop="deliveryDate" label="交货日期">
          <template slot-scope="scope">
            <span>{{ parseDate(scope.row.deliveryDate) }}</span>
          </template>
        </DataGridColumnSlot>
        <DataGridColumn slot="itemSpec" prop="itemSpec" label="规格" />
        <DataGridColumn slot="itemBrand" prop="itemBrand" label="品牌" />
        <DataGridColumnSlot slot="unit" prop="unit" label="单位">
          <template slot-scope="scope">
            <template v-for="item in dicts.item_unit">
              <span v-if="scope.row.unit.toString() === item.dictCode" :key="item.id" >{{ item.dictName }}</span>
            </template>
          </template>
        </DataGridColumnSlot>
        <DataGridColumn v-permission="['SYS_ADMIN','COMMON_ADMIN','PURCHASE_PO_ALL','PURCHASE_PO_PRICE']" slot="taxPrice" prop="taxPrice" label="含税单价" />
        <DataGridColumn v-permission="['SYS_ADMIN','COMMON_ADMIN','PURCHASE_PO_ALL','PURCHASE_PO_PRICE']" slot="taxRate" prop="taxRate" label="税率" />
      </DataGridTable>
    </div>
    <div slot="footer" class="modal-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import initData from '@/mixins/initData'
import po from '@/api/business/Po'
import { parseDate, parseTime } from '@/utils/index'

export default {
  mixins: [initData],
  dictTypes: ['item_unit'],
  props: {
    multiSelect: {
      default: false,
      requried: false,
      type: Boolean
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      selectedRows: [],
      selectedRow: {},
      sup_this: this,
      checkAll: false,
      paramData: null,
      busDate: new Date().getTime() - 1000 * 60 * 60 * 24 * 30 // 一个月内
    }
  },
  created() {
    this.paramBean.selfState = '10'
    this.url = po.loadDetailDataUrl()
  },
  mounted() {
  },
  methods: {
    parseDate,
    parseTime,
    initLoadData(otherSysOwnerCpy) {
      this.checkAll = false
      this.selectedRows = []
      this.selectedRow = {}
      this.paramBean.otherSysOwnerCpy = otherSysOwnerCpy
      this.init()
      this.dialog = true
    },
    async beforeInit() {
      this.paramBean.busDate = this.busDate
      return true
    },
    afterInit(res) {
    },
    filterQuery() {
      this.init()
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    doSubmit() {
      this.loading = true
      if (this.multiSelect) {
        const _selectRows = this.selectedRows
        const tmpKeys = Object.keys(_selectRows)
        const tmpRows = []
        for (const tmpKey of tmpKeys) {
          tmpRows.push(_selectRows[tmpKey])
        }
        this.$emit('poItemSelectCallback', tmpRows, this, this.paramData)
      } else {
        this.$emit('poItemSelectCallback', this.selectedRow, this, this.paramData)
      }
    },
    cancel() {
      this.checkAll = false
      this.selectedRows = []
      this.selectedRow = {}
      this.dialog = false
      this.loading = false
    },
    handleCurrentChange(val) {
      this.selectedRow = val
    },
    handleCheckAllChange(isChecked) {
      const tmpSelectRows = this.selectedRows
      if (isChecked) {
        this.data.rtnList.forEach(row => {
          tmpSelectRows[row.id] = row
        })
      } else {
        // 取消
        this.data.rtnList.forEach(row => {
          delete tmpSelectRows[row.id]
        })
      }
      this.selectedRows.splice(this.selectedRows.length)
    },
    checkSelectChange(row) {
      if (!this.selectedRows[row.id]) {
        // 选择
        this.selectedRows[row.id] = row
      } else {
        delete this.selectedRows[row.id]
      }
      this.selectedRows.splice(this.selectedRows.length)
    }
  }
}
</script>
